import { globalStyle, style } from '@vanilla-extract/css';
import { MEDIA_MAX_WIDTH, vars } from './vars.css';

const SCROLL_BAR_WIDTH = '4px';

globalStyle('*', {
	scrollbarWidth: 'thin',
	boxSizing: 'border-box',
	'@media': {
		[MEDIA_MAX_WIDTH]: {
			scrollbarWidth: 'none',
		},
	},
});

globalStyle('*::-webkit-scrollbar', {
	backgroundColor: vars.color.border,
	width: SCROLL_BAR_WIDTH,
	height: SCROLL_BAR_WIDTH,
	'@media': {
		[MEDIA_MAX_WIDTH]: {
			width: 0,
		},
	},
});

globalStyle('*::-webkit-scrollbar-thumb', {
	backgroundColor: vars.color.secondaryText,
	borderRadius: SCROLL_BAR_WIDTH,
});

globalStyle('*::-webkit-scrollbar-corner', {
	backgroundColor: vars.color.border,
});

export const hideScrollBar = style({
	'::-webkit-scrollbar': {
		display: 'none',
	},
	scrollbarWidth: 'none',
});

export const autoHideScrollBar = style({
	scrollbarWidth: 'thin',
	//scrollbarGutter: 'stable',
	padding: '0 -6px',
	selectors: {
		'&:not(:hover)': {
			scrollbarWidth: 'none',
		},
	},
});

globalStyle(`${autoHideScrollBar}::-webkit-scrollbar`, {
	background: 'transparent',
});

globalStyle(`${autoHideScrollBar}:hover::-webkit-scrollbar`, {
	backgroundColor: '#00000020',
});

globalStyle(`${autoHideScrollBar}::-webkit-scrollbar-thumb`, {
	background: 'transparent',
});
globalStyle(`${autoHideScrollBar}:hover::-webkit-scrollbar-thumb`, {
	backgroundColor: vars.color.secondaryText,
});
